<script setup lang="ts">
import Topic from '@/components/Topic.vue'
import { ref } from 'vue'
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { EditPen, MoreFilled } from '@element-plus/icons-vue'
import { userGetTopicListService } from '@/api/user'
import { adminAskReasonTopicService, adminDeleteTopicService, adminGetTopicListService } from '@/api/admin'

const topicList = ref([
  {
    id: 1,
    title: 'TCP和UDP有什么区别',
    publisher: '胡清钟',
    identify: 'teacher',
    createTime: '2024-12-04',
    watch: '10',
    reply: '2'
  }
])

enum identifyType {
  'teacher' = 'success',
  'student' = 'primary'
}

enum identifyCN {
  'teacher' = '老师',
  'student' = '学生'
}

// 删除时的弹窗
const isShowDeleteDialog = ref(false)
const deleteReason = ref({
  id:'',
  reason:'',
  anotherReason:''
})
const willDeleteTopic = ref()

// 跳转查看话题内容
const watchTopicContent = (id: number) => {
  router.push(`/teacher/topic/${id}`)
}

// 创建新话题
const createTopic = () => {
  router.push('/teacher/topic/add')
}

// 获取话题列表
const getTopicList = async (type: number) => {
  const res = await adminGetTopicListService(type)
  console.log(res.data.data)
  topicList.value = res.data.data
}

// 暂存要删除的话题id
const willDelete = (topic: Object) => {
  if (topic.identify === 'student'){
    isShowDeleteDialog.value = true
  }
  willDeleteTopic.value = topic
  deleteReason.value.id = willDeleteTopic.value.id
  if (topic.identify === 'teacher'){
    deleteTopic()
  }
}

// 删除话题
const deleteTopic = async () => {
  if (!willDeleteTopic.value) return
  await ElMessageBox.confirm(
    `此操作将永久删除该话题, 是否继续?`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )

  if (willDeleteTopic.value.identify === 'student'){
    await adminAskReasonTopicService(deleteReason.value)
  }
  await adminDeleteTopicService(willDeleteTopic.value.id)
  console.log(deleteReason.value)
  ElMessage.success('删除成功')
  isShowDeleteDialog.value = false
  await getTopicList(1)
  deleteReason.value.reason = ''
  deleteReason.value.anotherReason = ''
  deleteReason.value.reason = ''
}

// 初始化加载最新话题
getTopicList(1)
</script>

<template>
  <div id="main">
    <!-- 新建话题按钮 -->
    <el-button
      :icon="EditPen"
      circle
      type="primary"
      class="createTopic-btn"
      @click="createTopic"
    ></el-button>

    <!-- 菜单选项 -->
    <div class="select-topic">
      <el-menu mode="horizontal" :default-active="'1'">
        <el-menu-item index="1" @click="getTopicList(1)">最新的话题</el-menu-item>
        <el-menu-item index="2" @click="getTopicList(2)">最热的话题</el-menu-item>
        <el-menu-item index="3" @click="getTopicList(3)">老师发布的话题</el-menu-item>
      </el-menu>
    </div>

    <!-- 滚动话题列表 -->
    <el-scrollbar height="100vh">
      <Topic
        @click="watchTopicContent(topic.id)"
        v-for="topic in topicList"
        :key="topic.id"
      >
        <template #title>{{ topic.title }}</template>
        <template #delete>
          <el-dropdown style="margin-right: 20px">
            <el-icon class="el-icon--right">
              <MoreFilled />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="willDelete(topic)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #publisher>{{ topic.publisher }}</template>
        <template #identify>
          <el-tag :type="identifyType[topic.identify]" style="margin-left: 5px">
            {{ identifyCN[topic.identify] }}
          </el-tag>
        </template>
        <template #createTime>{{ topic.createTime }}</template>
        <template #reply>{{ topic.reply }}</template>
      </Topic>
    </el-scrollbar>

    <!-- 删除确认弹窗 -->
    <el-dialog append-to-body v-model="isShowDeleteDialog" width="400">
      <div>
        <h1 style="text-align: center">删除理由</h1>
        <el-form style="margin-top: 10px">
          <el-form-item>
            <el-select v-model="deleteReason.reason" placeholder="请选择删除理由">
              <el-option label="语言包含违规词汇" value="语言包含违规词汇" />
              <el-option label="话题引战" value="话题引战" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-if="deleteReason.reason === '其他'"
              v-model="deleteReason.anotherReason"
              placeholder="请输入理由"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-area">
          <el-button type="primary" @click="deleteTopic">确认</el-button>
          <el-button type="warning" @click="isShowDeleteDialog = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.createTopic-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 20px;
  top: 5px;
  z-index: 999;
}
</style>
